<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>X-admin v1.0</title>
<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_head" th:content="${_csrf.parameterName}" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" th:href="@{/css/x-admin.css}" media="all" />
</head>

<body style="background-color: #393D49">
	<div class="x-box">
		<div class="x-top">
			<i class="layui-icon x-login-close"> &#x1007; </i>
			<ul class="x-login-right">
				<li style="background-color: #F1C85F;" color="#F1C85F"></li>
				<li style="background-color: #EA569A;" color="#EA569A"></li>
				<li style="background-color: #393D49;" color="#393D49"></li>
			</ul>
		</div>
		<div class="x-mid">
			<div class="x-avtar">
				<img th:src="@{/images/logo.png}" />
			</div>
			<div>
			     
				<form class="layui-form" th:action="@{/login}" th:object="${loginForm}" method="post" >
					<input type="hidden" th:name="${_csrf.parameterName}"
						th:value="${_csrf.token}" />
					<div class="layui-form-item x-login-box">
						<label for="username" class="layui-form-label"> <i
							class="layui-icon">&#xe612;</i>
						</label>
						<div class="layui-input-inline">
							<input type="text" id="username" th:field="*{username}" required=""
								lay-verify="username" autocomplete="off" placeholder="username"
								class="layui-input" />
						</div>
                        <p style="color:#FF5722" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></p>
                    </div>
                    <div class="layui-form-item x-login-box">
                        <label for="pass" class="layui-form-label"> <i
                            class="layui-icon">&#xe628;</i>
                        </label>
                        <div class="layui-input-inline">
                            <input type="password" id="pass" th:field="*{password}" required=""
                                lay-verify="password" autocomplete="off" placeholder="******"
                                class="layui-input" />
                        </div>
                        <p style="color:#FF5722" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
                    </div>
                    <div class="layui-form-item x-login-box">
                        <label for="pass" class="layui-form-label"> <i
                            class="layui-icon">&#xe60b;</i>
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="captcha" th:field="*{captcha}" required=""
                                lay-verify="captcha" autocomplete="off" placeholder=""
                                class="layui-input" />
                        </div>
                        <div class="layui-image-inline">
                            <img th:src="@{/images/captcha}" height="36" width="80"/>
                        </div>
                        <p style="color:#FF5722" th:if="${#fields.hasErrors('captcha')}" th:errors="*{captcha}"></p>
                    </div>
					<div class="layui-form-item" id="loginbtn">
						<button class="layui-btn" lay-filter="save" lay-submit="">登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<p style="color: #fff; text-align: center;">Copyright ©
		2017.Company name All rights My Company</p>
	<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
	<script>
            layui.use(['form'],
            function() {
                $ = layui.jquery;
                var form = layui.form(),
                layer = layui.layer;

                $('.x-login-right li').click(function(event) {
                    color = $(this).attr('color');
                    $('body').css('background-color', color);
                });

            });

        </script>
</body>
</html>